<template>
  <div class="main">
    <div style="position: relative;height: 2.6vh;
    width: 100%;"></div>
    <div class="main_left">
      <el-tree :data="list" default-expand-all node-key="menuId" ref="tree" :check-strictly="true" highlight-current
        :props="defaultProps" @node-click="changeVueDemo">
        <span slot-scope="{ node, data }">
          <i :class="data.iconxt"></i>
          <span style="margin-left: 10px">{{ node.label }}</span>
        </span>

      </el-tree>
    </div>
    <div class="main_right">
      <div class="main_right_child">
        <userBaseInfor v-if="getdisplayVueDemo == 'userBaseInfor'"></userBaseInfor>
        <updateHeader v-if="getdisplayVueDemo == 'updateUseHeader'"></updateHeader>
      </div>
    </div>
  </div>
</template>

<script>
import getStorage from '@/utils/getStorage'
import myInformationApi from '@/api/userzRequest.js'
import userBaseInfor from '@/views/userInformationall/userBaseInfor.vue'
import updateHeader from './userInformationall/updateHeader.vue'
export default {
  // 组件名称
  name: 'myInformation',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { userBaseInfor, updateHeader },
  // 组件状态值
  data() {
    return {
      //el-tree数据
      list: [{
        tid: 0,
        tname: '个人信息',
        iconxt: 'el-icon-user-solid',
        tchildren: [{
          tid: 1,
          tname: '基本信息',
          tpath: 'userBaseInfor',
          iconxt: 'el-icon-user',
          tchildren: []
        }],
      }, {
        tid: 3,
        tname: '修改',
        tchildren: [{
          tname: '修改头像',
          tchildren: [],
          tpath: 'updateUseHeader',
          iconxt: 'el-icon-picture-outline',
        }],
        iconxt: 'el-icon-s-tools',
      }],
      //el-tree展示的数据
      defaultProps: {
        children: 'tchildren',
        label: 'tname'
      }
    }
  },
  // 计算属性
  computed: {
    //获取展示什么页面
    getdisplayVueDemo() {
      return this.$store.getters['userinfor/getdisplayVueDemo'];
    },
  },
  // 侦听器
  watch: {

  },
  // 组件方法
  methods: {
    //el-tree复选框被选中时的回调
    changeVueDemo(checkedNodes) {
      if (checkedNodes.tchildren.length <= 0) {
        this.$store.commit("userinfor/insertdisplayVueDemo", checkedNodes.tpath);
      }

    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 在实例初始化之后，组件属性计算之前，如data属性等
  */
  beforeCreate() {
  },
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created() {

  },
  /**
  * 在挂载开始之前被调用：相关的 render 函数首次被调用。
  */
  beforeMount() {

  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted() {
  },
  /**
  * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
  */
  beforeUpdate() {
  },
  /**
  * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
  */
  updated() {
  },
  /**
  * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
  */
  activated() {
  },
  /**
  * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
  */
  deactivated() {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy() {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed() {
  }
}
</script> 


<style scoped >
.main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.main_left {
  position: relative;
  width: 13%;
  left: 2vw;
}

.main_right {
  position: relative;
  width: 85.1%;
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_right_child {
  position: relative;
  width: 98%;
  height: 99%;

}
</style>